<template>
  <div class="event-sheet">
    <div>
      <div class="item" v-for="(item, index) in data" :key="index">
        <div class="head" @contextmenu.prevent="onRightMenu($event,item.id)">
          {{ getIndex(item) }}
        </div>
        <component
          style="flex:1;"
          :is="getComponent(item.type)"
          :data="item"
        ></component>
      </div>

    </div>
    <div class="footer">
      <div class="add" @click="onAddEvent">
        添加事件
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, computed, defineComponent, provide, ref } from 'vue';
import eventsStore, {
  EventAction,
  EventBlock,
  EventComment,
  EventCondition,
  EventSheet,
  EventType,
  EventVariable,
} from '../store/events';
import CompEventComment from './comment.vue';
import CompEventCondition from './block/index.vue';
import EventVar from './variable.vue';
import { ProvideKey } from './msg';
import { inquirerNewEventAction, inquirerNewEventBlock } from './inquirer';
import { Emitter } from '@/ui-kit/index';
import { Msg } from '@/ui-kit/menu';

export default defineComponent({
  name: 'event-sheet',
  components: {},
  props: {
    id: {
      type: String, // 事件表的id
      required: true,
      default: '',
    },
  },
  setup(props, { emit }) {
    const data = computed(() => {
      if (props.id) {
        const ret: EventSheet | null = eventsStore().loadSheet(props.id);
        if (ret) {
          return ret.data;
        }
      }
      return [];
    });

    provide(ProvideKey.AddBlock, (blockID: string) => {
      inquirerNewEventBlock(props.id, blockID);
    });
    provide(ProvideKey.AddBlockAction, (blockID: string) => {
      inquirerNewEventAction(props.id, blockID);
    });
    provide(ProvideKey.AddBlockCondition, () => {

    });
    provide(ProvideKey.ChangeComment, (id: string, comment: string) => {
      eventsStore().changeComment(props.id, id, comment);
    });
    provide(ProvideKey.AddComment, () => {
      eventsStore().addComment(props.id);
    });
    provide(ProvideKey.RemoveComment, (commonID: string) => {
      eventsStore().removeComment(props.id, commonID);
    });
    provide(ProvideKey.RemoveBlockCondition, (blockID: string, condition: EventCondition) => {
      eventsStore().removeBlockCondition(props.id, blockID, condition.id);
    });
    provide(ProvideKey.RemoveBlockAction, (blockID: string, action: EventAction) => {
      eventsStore().removeBlockAction(props.id, blockID, action.id);
    });
    return {
      data,
      getComponent(type: EventType): Component {
        const cfg: any = {};
        cfg[EventType.Comment] = CompEventComment;
        cfg[EventType.Variable] = EventVar;
        cfg[EventType.Block] = CompEventCondition;
        return cfg[type];
      },
      onAddEvent() {
        inquirerNewEventBlock(props.id);
      },
      getIndex(item: any) {
        return eventsStore().getItemIndex(props.id, item.id) || '';
      },
      onRightMenu(event: MouseEvent, itemID: string) {
        Emitter.emit(Msg.ShowMenu, event, [
          {
            name: '删除',
            callback: () => {
              eventsStore().removeSheetItem(props.id, itemID);
            },
          },
          {
            name: '添加注释',
            callback: () => {
              eventsStore().addComment(props.id);
            },
          },
          {
            name: '添加全局变量',
            callback: () => {

            },
          },
        ]);
      },
    };
  },
});
</script>
<style scoped lang="scss">
.event-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: auto;

  .item {
    display: flex;
    flex-direction: row;
    margin: 2px 0;

    .head {
      color: #bfcce0;
      width: 50px;
      margin-top: 3px;
    }
  }

  .footer {
    margin: 5px;
    margin-left: 30px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    .add {
      width: 100px;
      height: 30px;
      cursor: pointer;
      color: #bfcce0;

      &:hover {
        color: #1a1a1a;
      }
    }
  }
}
</style>
